<template>
    <div class="content">
        <div class="main">
            <div class="tool-bar">
                <div class="to-login">
                    <img
                        class="avatar"
                        :src="userInfo.avatar"
                        v-if="token && userInfo && userInfo.avatar"
                    />
                    <img class="avatar" src="@/static/images/my/avatar.png" v-else />
                    <p class="name" v-if="token && userInfo">
                        {{ userInfo.nickname || userInfo.mobile }}
                    </p>
                    <p class="name" @click="toLogin" v-else>去登录</p>
                </div>
                <div class="location" v-if="city">
                    <img class="image" src="@/static/images/index/location.png" />
                    {{ city }}
                </div>
            </div>
            <u-swiper :list="bannerList" height="238rpx" radius="24rpx"></u-swiper>
            <div class="nav-list">
                <div
                    class="nav-item"
                    v-for="(item, index) in navList"
                    :key="index"
                    @click="toPath(item.path)"
                >
                    <div class="hot" v-if="index === 0">Hot</div>
                    <img class="image" :src="item.url" />
                    <p class="name">{{ item.name }}</p>
                </div>
            </div>
            <div class="notice-bar">
                <Title name="最新资讯" startColor="#7DE9DF" endColor="#B6F6F7"></Title>
                <u-notice-bar
                    :text="noticeList"
                    icon=" "
                    bgColor="#fff"
                    color="#000"
                    :duration="5000"
                ></u-notice-bar>
            </div>
            <div class="my-order" v-if="token && userReservation.length > 0">
                <Title name="我的预定" startColor="#8D7DE9" endColor="#F7B6E3"></Title>
                <div class="book-list">
                    <div class="book-item" v-for="item in userReservation" :key="item.id">
                        <book-item toShop :item="item" />
                    </div>
                </div>
            </div>
        </div>
        <div class="study-room">
            <Title name="探索门店" startColor="#8DE97D" endColor="#C9F7B6"></Title>
            <div class="room-list">
                <div class="room-item" v-for="(item, index) in nearbyStudyHalls" :key="item.id">
                    <room-item :item="item" :isNear="index === 0" />
                </div>

                <u-loadmore
                    loadmoreText="找自习 来上岸"
                    fontSize="24rpx"
                    color="#D5D5D5"
                    lineColor="#D5D5D5"
                    marginTop="20"
                    line
                />
            </div>
        </div>
    </div>
</template>

<script>
import Title from '@/components/Title';
import BookItem from '@/components/BookItem';
import RoomItem from '@/components/RoomItem';
import { mapGetters } from 'vuex';
export default {
    name: 'index',
    components: {
        Title,
        BookItem,
        RoomItem,
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    data() {
        return {
            city: '',
            token: null,
            bannerList: ['/static/images/index/banner.jpg'],
            navList: [
                {
                    url: '/static/images/index/room.png',
                    name: '找自习室',
                    path: '/pages/room/index',
                },
                {
                    url: '/static/images/index/service.png',
                    name: '考研服务',
                },
                {
                    url: '/static/images/index/abroad.png',
                    name: '出国留学',
                },
                {
                    url: '/static/images/index/shore.png',
                    name: '考公考编',
                },
            ],
            noticeList: '· 湖州首家网红自习室/聚人研习室 开业啦',
            userReservation: [],
            nearbyStudyHalls: [],
        };
    },
    onLoad() {
        let that = this;
        uni.getLocation({
            type: 'gcj02',
            success(res) {
                getApp().globalData.longitude = res.longitude;
                getApp().globalData.latitude = res.latitude;
            },
            complete() {
                that.getHomeInfo();
            },
        });
    },
    onPullDownRefresh() {
        this.getHomeInfo();
    },
    onShow() {
        if (uni.getStorageSync('token')) {
            this.token = uni.getStorageSync('token');
            this.$store.dispatch('getUserInfo');
            this.getHomeInfo();
        }
    },
    methods: {
        toLogin() {
            if (!uni.getStorageSync('token')) {
                uni.navigateTo({
                    url: '/pages/login/index',
                });
                return false;
            }
        },
        getHomeInfo() {
            let longitude = getApp().globalData.longitude;
            let latitude = getApp().globalData.latitude;
            this.$Api.home.main
                .get({
                    longitude,
                    latitude,
                })
                .then(res => {
                    this.city = res.city;
                    this.userReservation = res.userReservation || [];
                    this.nearbyStudyHalls = res.nearbyStudyHalls || [];
                    uni.stopPullDownRefresh();
                });
        },
        toPath(url) {
            if (url === '/pages/room/index') {
                uni.switchTab({
                    url,
                });
            } else {
                uni.hideToast();
                uni.showToast({
                    title: '功能正在建设中',
                    icon: 'none',
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
page {
    background: #f6f6f6;
}
.content {
    .main {
        padding: 0 30rpx 30rpx;
        background: linear-gradient(0deg, #ffffff 50%, #e6dfff 100%);
        .tool-bar {
            padding: 30rpx 0;
            @include flexBox(space-between);
            .to-login {
                @include flexBox(flex-start, center);
                .avatar {
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 20rpx;
                    border-radius: 50%;
                }
                .name {
                    font-size: 28rpx;
                    color: #2f2f2f;
                    font-weight: 600;
                }
            }
            .location {
                font-size: 28rpx;
                color: #2f2f2f;
                font-weight: 600;
                @include flexBox(center, center);
                .image {
                    width: 44rpx;
                    height: 44rpx;
                    margin-right: 10rpx;
                }
            }
        }
        .nav-list {
            margin-top: 20rpx;
            @include flexBox(space-around);
            .nav-item {
                margin: 20rpx 0;
                position: relative;
                @include flexBox(center, center, column);
                .hot {
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                    color: #fff;
                    font-size: 20rpx;
                    padding: 0 8rpx;
                    background: linear-gradient(321deg, #ffc658 0%, #ff8e4e 100%);
                    border-radius: 50rpx;
                }
                .image {
                    width: 106rpx;
                    height: 104rpx;
                }
                .name {
                    color: #5c5c5c;
                    font-size: 28rpx;
                }
            }
        }
        .notice-bar {
            margin-top: 30rpx;
            @include flexBox(space-between, center);
        }
        .my-order {
            margin-top: 40rpx;
            .book-list {
                margin-top: 30rpx;
                .book-item {
                    border: 1rpx solid #e5e5e5;
                    border-radius: 24rpx;
                }
            }
        }
    }
    .study-room {
        padding: 30rpx;
        .room-list {
            margin: 30rpx 0;
            .room-item {
                margin-bottom: 20rpx;
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style>
